<template>
  <div>
    <ZTable
      :data-source="dataSource1"
      :columns="columns1"
      :scroll="{ x: 1500, y: 300 }"
    />
  </div>
</template>
<script>
  import { defineComponent, ref} from 'vue'
  export default defineComponent({
    setup() {
      const columns1 = ref([
        {
          title: 'Full Name',
          width: 100,
          dataIndex: 'name',
          key: 'name',
          fixed: 'left'
        },
        {
          title: 'Age',
          width: 100,
          dataIndex: 'age',
          key: 'age',
          fixed: 'left'
        },
        {
          title: 'Column 1',
          dataIndex: 'address',
          key: '1',
          width: 150
        },
        {
          title: 'Column 2',
          dataIndex: 'address',
          key: '2',
          width: 150
        },
        {
          title: 'Column 3',
          dataIndex: 'address',
          key: '3',
          width: 150
        },
        {
          title: 'Column 4',
          dataIndex: 'address',
          key: '4',
          width: 150
        },
        {
          title: 'Column 5',
          dataIndex: 'address',
          key: '5',
          width: 150
        },
        {
          title: 'Column 6',
          dataIndex: 'address',
          key: '6',
          width: 150
        },
        {
          title: 'Column 7',
          dataIndex: 'address',
          key: '7',
          width: 150
        },
        {
          title: 'Column 8',
          dataIndex: 'address',
          key: '8'
        },
        {
          title: 'Action',
          key: 'operation',
          fixed: 'right',
          width: 100
        }
      ])
      const dataSource1 = ref([])
      for (let i = 0; i < 10; i++) {
        dataSource1.value.push({
          key: i,
          name: 'Edrward',
          age: 32,
          address: 'London'
        })
      }
      return {
        dataSource1,
        columns1
      }
    }
  })
</script>
    